<!--
 @description
 @fileName NativeFile.vue
 @author zengqiongying
 @created 2023-04-20 22:05:06
-->
<template>
  <div class="c-file-input-icon">
    <img :src="camera" @click.stop="openCamera" />
    <img :src="album" @click.stop="openAlbum" />
  </div>
</template>

<script lang="ts">
  import { defineComponent, reactive, toRefs, computed, getCurrentInstance } from 'vue'
  import folder from '@/assets/images/upload/folder.png'
  import album from '@/assets/images/upload/album.png'
  import camera from '@/assets/images/upload/camera.png'

  function dataURLtoBlob(baseurl: any) {
    const mime = 'image/jpeg'
    const bstr = atob(baseurl)
    let n = bstr.length
    const u8arr = new Uint8Array(n)
    while (n--) {
      u8arr[n] = bstr.charCodeAt(n)
    }
    return new Blob([u8arr], {
      type: mime
    })
  }

  export default defineComponent({
    name: 'NativeSelectFile',
    props: {
      visible: {
        type: Boolean,
        default: false
      },
      needPicNum: {
        type: Number,
        default: 1
      }
    },
    setup(props: any, ctx: any) {
      const { proxy }: any = getCurrentInstance()
      const datas = reactive({
        folder,
        album,
        camera
      })
      const popVisible = computed({
        get() {
          return props.visible
        },
        set(val: any) {
          ctx.emit('update:visible', val)
        }
      })
      const openCamera = () => {
        proxy
          .$nativeHandler('openCamera')
          .then((res: any) => {
            const data = {
              target: {
                files: (res.data || []).map((e: any) => {
                  return new File([dataURLtoBlob(e)], `${new Date().getTime()}.${res.type}`, {
                    type: `image/${res.type}`
                  })
                })
              }
            }
            ctx.emit('success', data)
          })
          .catch((err: any) => {
            ctx.emit('error', err)
          })
          .finally(() => {
            popVisible.value = false
          })
      }

      const openAlbum = () => {
        const needPicNum = props.limit <= 0 ? 1 : props.limit
        proxy
          .$nativeHandler('openAlbum', { needPicNum: needPicNum })
          .then((res: any) => {
            console.log('选择的文件')
            console.log(res.data)
            const data = {
              target: {
                files: (res.data || []).map((e: any) => {
                  return new File([dataURLtoBlob(e)], `${new Date().getTime()}.${res.type}`, {
                    type: `image/${res.type}`
                  })
                })
              }
            }
            ctx.emit('success', data)
          })
          .catch((err: any) => {
            ctx.emit('error', err)
          })
          .finally(() => {
            popVisible.value = false
          })
      }
      return {
        ...toRefs(datas),
        popVisible,
        openCamera,
        openAlbum
      }
    }
  })
</script>
<style lang="less" scoped>
  .c-file-input-icon {
    display: flex;
    padding: 15px 5px;
    justify-content: space-around;
    box-sizing: border-box;
    & > img {
      flex: 0 0 40px;
      width: 40px;
      height: 40px;
    }
  }
</style>
